<template>
	<view class="bill-detail-components-container">
		<!-- 上面显示 x 和 名称 -->
		<top-title-text @closeBtn="closeBtn" titleText="明细"></top-title-text>
		<view class="bill-detail-content-container">
			<!-- 上面显示金额 -->
			<view class="bill-detail-content-up-money-container">
				<view class="bill-detail-content-up-input-container">
				<!-- <view class="bill-detail-content-up-input-container" :style="{width: moneyLength + 'rpx'}"> -->
					<u--input border="none" type="number" v-model="bill.money" placeholder="请输入金额" style="width: 400rpx" @change="changeLength('money')" :fontSize="17" :color="fontColor"></u--input>
				</view>
			</view>
			<!-- 类型 -->
			<view class="bill-detail-content-up-type-container">
				<view class="bill-detail-content-up-type-left-name">类型</view>
				<view class="bill-detail-content-up-type-right-content">
					<view class="type-container-right" >
						<!-- <view @click="changeType(index)" :class=" ['type-class', 'select-type']" v-for="(item, index) in typeList">{{item.name}}</view> -->
						<view :class=" ['type-class', {'select-type': item.selected}]" v-for="(item, index) in typeList">{{item.name}}</view>
					</view>
				</view>
			</view>
			<!-- 分类 -->
			<view class="bill-detail-content-up-category-right-container">
				<view class="bill-detail-content-up-category-left-name">分类</view>
				<view class="bill-detail-content-up-category-right-content" :style="{width: bill.categoryLength + 'rpx'}" @click="showCategory">
					<!-- TODO 做一个中间弹框，显示所有的分类，然后给用户选择，后续也会使用 -->
					<!-- <u--input border="none" v-model="bill.category" @change="change('category')" :fontSize="15" :color="fontColor"></u--input> -->{{bill.categoryName ? bill.categoryName : '请选择分类'}}
				</view>
			</view>
			<!-- 账户 -->
			<view class="bill-detail-content-up-account-container">
				<view class="bill-detail-content-up-account-left-name">账户</view>
				<!-- <view class="bill-detail-content-up-account-right-content" :style="{width: bill.accountLength + 'rpx'}" @click="changeFlag('showAccountPopupFlag', true)"> -->
				<view class="bill-detail-content-up-account-right-content" :style="{width: bill.accountLength + 'rpx'}" @click="changeFlag('showAccountPopupFlag', true)">
					{{bill.accountName ? bill.accountName : '请选择账户'}}
					<!-- TODO 弹框给用户选择 -->
					<!-- <view v-if="bill.accountName != '选择账户'"> -->
						<!-- <view class="bill-detail-content-up-account-right-content-left-icon iconfont icon-hongbao"></view> -->
						<!-- <view class="bill-detail-content-up-account-right-content-right-name"> </view>-->
					<!-- </view> -->
				</view>
			</view>
			<!-- 年份 -->
			<view class="bill-detail-content-up-time-container" @click="() => showCalendar = true">
				<view class="bill-detail-content-up-time-left-name">年份</view>
				<view class="bill-detail-content-up-time-right-content">{{bill.yearStr}}</view>
			</view>
			<!-- 月份 -->
			<view class="bill-detail-content-up-time-container" @click="() => showCalendar = true">
				<view class="bill-detail-content-up-time-left-name">月份</view>
				<view class="bill-detail-content-up-time-right-content">{{bill.monthStr}}</view>
			</view>
			<!-- 时间 -->
			<view class="bill-detail-content-up-time-container" @click="() => showCalendar = true">
				<view class="bill-detail-content-up-time-left-name">时间</view>
				<view class="bill-detail-content-up-time-right-content">
					{{bill.time ? bill.time : '请选择时间'}}
					<!-- <u--input border="none" v-model="bill.time" @change="change('time')" :fontSize="15" :color="fontColor"></u--input> -->
					<!-- <u-datetime-picker :closeOnClickOverlay="true" @close="() => showCalendar = false" :minDate="minTime" :show="showCalendar" v-model="time" mode="datetime" @cancel="() => showCalendar = false" @confirm="confirm"></u-datetime-picker> -->
					<u-datetime-picker :minDate="minTime" :show="showCalendar" v-model="time" mode="datetime" @cancel="() => showCalendar = false" @confirm="confirm"></u-datetime-picker>
				</view>
			</view>
			<!-- 备注 -->
			<view class="bill-detail-content-up-time-container">
				<view class="bill-detail-content-up-time-left-name">备注</view>
				<view class="bill-detail-content-up-time-right-content">
					<u--input border="none" v-model="bill.remarks" placeholder="请输入备注" style="width: 400rpx":fontSize="12" :color="fontColor"></u--input>
				</view>
			</view>
			<view class="add-account-btn-container" @click="saveOrUpdateBill">
				<view class="add-account-btn-content">保存</view>
			</view>
		</view>
		<!-- 分类弹框组件 -->
		<u-popup :show="showCategoryPopupFlag" :round="20" mode="center" @close="changeFlag('showCategoryPopupFlag', false)" @open="changeFlag('showCategoryPopupFlag', true)">
			<category-popup :selectIndex="bill.categoryIndex" :categoryList="categoryList" @selectCategoryCallback="selectCategoryCallback"></category-popup>
		</u-popup>
		<!-- 账户弹框组件 -->
		<u-popup :show="showAccountPopupFlag" :round="20" mode="center" @close="changeFlag('showAccountPopupFlag', false)" @open="changeFlag('showAccountPopupFlag', true)">
			<account-popup :selectIndex="bill.accountIndex" :accountList="accountList" @selectAccountCallback="selectAccountCallback"></account-popup>
		</u-popup>
	</view>
</template> 

<script>
	import categoryPopup from '@/components/category-popup/category-popup.vue';
	import accountPopup from '@/components/account-popup/account-popup.vue';
	import {checkStrType, calculateLength, checkStrType2} from '@/util/regular/regular.js';
	export default {
		components: {
			categoryPopup, accountPopup
		},
		props: {
			bill: {
				type: Object,
				default: () => {}
			},
			categoryList: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				minTime: -1,								// 最小时间（选择时间的时候，由于已经选择了年份，月份，所以需要有最小值）
				accountList: [],							// 账户集合
				typeList: [
					{id: 1, name: '支出', selected: true, type: 'pay'},
					{id: 2, name: '收入', selected: false, type: 'income'}
				],
				moneyLength: 0,								// 金钱输入框父盒子宽度
				categoryLength: 0,							// 分类输入框父盒子宽度
				accountLength: 0,							// 账户输入框父盒子宽度
				timeLength: 0,								// 时间输入框父盒子宽度
				fontColor: '',								// 字体颜色（对接接口根据类型决定，支出红色，反之绿色）
				showCalendar: false,							// 显示选择时间
				defaultDate: '2022-05-24',
				time: '',
				showCategoryPopupFlag: false,				// 显示分类名字选择组件
				showAccountPopupFlag: false,				// 显示分类名字选择组件
			}
		},
		methods: {
			/** 选择账户回调
			 * @param {Object} item 对象
			 * @param {Object} index 索引
			 */
			selectAccountCallback(item, index) {
				this.bill.accountId = item.id;
				this.bill.accountName = item.name;
				this.bill.accountIndex = index;
				this.bill.accountIcon = item.icon;
				this.bill.accountIconColor = item.iconColor;
				this.bill.accountLength = checkStrType2(this.bill.accountName, 50, 50);
				this.changeFlag('showAccountPopupFlag', false);
				console.log("账户信息  ", this.bill);
			},
			/**
			 * 保存账单
			 */
			saveOrUpdateBill() {
				console.log(this.bill, "aaaaaaa");
				this.$emit("saveOrUpdate");
			},
			/** 选择分类回调事件
			 * @param {Object} item 分类集合
			 * @param {Object} index 所以
			 */
			selectCategoryCallback(item, index) {
				this.bill.categoryType = item.type;
				this.bill.categoryId = item.id;
				this.bill.categoryName = item.name;
				this.bill.type = item.type;
				this.bill.categoryIcon = item.icon;
				this.bill.categoryIconColor = item.iconColor;
				this.bill.categoryIndex = index;
				this.bill.categoryCircularColor = item.bgcColor;
				this.bill.categoryLength = checkStrType2(this.bill.categoryName, 50, 35);
				this.changeFlag('showCategoryPopupFlag', false);
				this.typeList.forEach(item => item.selected = item.type == this.bill.type);
				console.log("this.bill", this.bill);
			},
			/** 根据下标修改对应的selected的值
			 * @param {Object} index 下标
			 */
			changeType(index) {
				this.typeList.forEach((item, index1) => item.selected = index == index1);
				this.$emit("changeType", this.typeList[index].type);
			},
			/**	切换是否显示新增账户弹窗
			  * @param {Object} name 组件flag名字
			  * @param {Object} flag 是否显示
			  */
			changeFlag(name, flag) {
				this[name] = flag;
			},
			/** 确认时间
			 * @param {Object} e
			 */
			confirm(e) {
				this.time = e.value;
				this.bill.time = this.$dayjs(e.value).format('YYYY-MM-DD HH:mm:ss');
				this.showCalendar = false;
				this.timeLength = checkStrType2(this.bill[name], 30, 18);
			},
			/**
			 * 点击选择分类（弹框显示所有的分类）
			 */
			showCategory() {
				this.changeFlag('showCategoryPopupFlag', true);
			},
			/** 输入框改变事件
			 * @param {Object} name 属性名字
			 */
			changeLength(name) {
				if (name == "money") {
					// this.bill.moneyLength = calculateLength(this.bill[name], 64);
				} else if (name == "categoryName") {
					var a = this.bill[name];
					this.bill.categoryLength = checkStrType2(this.bill[name], 45, 45);
				}else if (name == "accountName") {
					console.log("触发了", this.bill[name]);
					this.bill.accountLength = checkStrType2(this.bill[name], 45, 35);
				}else if (name == "time") {
					this.bill.timeLength = checkStrType2(this.bill[name], 35, 25);
				}
			},
			/**
			 * 点击左上角关闭事件
			 */
			closeBtn() {
				this.$emit("closeBtn")
			},
			getAccoutList() {
				this.$req.getAccountList().then(res => {
					if (res.success) {
						res.data.accountOtherVoList.forEach(item => this.accountList.push(...item.accountVoList));
					}
				})
			},
			/**
			 * 根据年和月获取指定年和月的第一天，例如2022,7 得到的是2022-07-01 00:00:00转为时间戳
			 * @param year
			 * @param month
			 */
			getTimeByMonthAndYear(year, month) {
			  month = Number(month) >= 10 ? month : "0" + month;
			  var date = new Date(year + "-" + month + "-01 00:00:00");
			  this.minTime = date.getTime();
			  console.log(this.minTime, "12312321");
			},
			/**
			 * 将时间戳转为时间
			 * @param timestamp
			 * @returns {string}
			 */
			timestampToTime(timestamp) {
			  var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
			  var Y = date.getFullYear() + '-';
			  var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
			  var D = date.getDate() + ' ';
			  var h = date.getHours() + ':';
			  var m = date.getMinutes() + ':';
			  var s = date.getSeconds();
			  return Y+M+D+h+m+s;
			},
		},
		mounted() {
			if (!this.bill.categoryName) {
				this.bill.categoryName = '选择分类';
			}
			if (!this.bill.accountName) {
				this.bill.accountName = '选择账户';
			}
			if (!this.bill.time) {
				this.bill.time = '选择时间';
			}
			this.bill.yearStr = '2025'
			this.bill.monthStr = '1'
			// this.bill.moneyLength = calculateLength(this.bill.money);
			this.bill.categoryLength = checkStrType2(this.bill.categoryName, 50, 45);
			this.bill.accountLength = checkStrType2(this.bill.accountName, 50, 35);
			this.bill.timeLength = checkStrType2(this.bill.time, 50, 35);
			this.getAccoutList();
			this.getTimeByMonthAndYear(this.bill.yearStr, this.bill.monthStr);
		},
	}
</script>

<style lang="scss">
	.bill-detail-components-container {
		width: 100%;
		height: 1320rpx;
		padding: 10rpx 30rpx;
		box-sizing: border-box;
		
		.bill-detail-content-container {
			width: 100%;
			height: 80%;
			box-sizing: border-box;
			
			.bill-detail-content-up-money-container {
				width: 100%;
				height: 150rpx;
				margin-top: 20rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;
				
				.bill-detail-content-up-input-container {
					width: auto;
					padding: 0rpx 50rpx;
					font-size: 50rpx;
					height: 100rpx;
					border-radius: 80rpx;
					background-color: $themeBgcLightGreyColor;
					line-height: 100rpx;
					color: white;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
			
			.bill-detail-content-up-type-container {
				width: 100%;
				height: 120rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.bill-detail-content-up-type-left-name {
					width: 30%;
					text-align: left;
					line-height: 120rpx;
					height: 100%;
					color: $typefaceGreyColor;
					
				}
				.bill-detail-content-up-type-right-content {
					width: 40%;
					height: 60rpx;
					// padding: 10rpx;
					// box-sizing: border-box;
					
					// 右边选择类型
					.type-container-right {
						width: 100%;
						height: 100%;
						font-weight: bold;
						background-color: $themeBgcLightGreyColor;
						border-radius: 30rpx;
						color: $typefaceGreyColor;
						font-size: 30rpx;
						text-align: center;
						display: flex;
						justify-content: center;
						align-items: center;
						line-height: 60rpx;
						.type-class {
							width: 50%;
							height: 100%;
						}
					}
					
					.select-type {
						border-radius: 30rpx;
						background-color: $themeYellowColor;
						color: $themePurpleColor;
					}
				}
			}
			
			.bill-detail-content-up-category-right-container {
				width: 100%;
				height: 120rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.bill-detail-content-up-category-left-name {
					width: 30%;
					text-align: left;
					line-height: 120rpx;
					height: 100%;
					color: $typefaceGreyColor;
				}
				.bill-detail-content-up-category-right-content {
					padding: 10rpx 20rpx;
					border-radius: 20rpx;
					box-sizing: border-box;
					background-color: $themeBgcLightGreyColor;
					color: $typefaceGreyColor;
				}
			}
			
			.bill-detail-content-up-account-container {
				width: 100%;
				height: 120rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.bill-detail-content-up-account-left-name {
					width: 30%;
					text-align: left;
					line-height: 120rpx;
					height: 100%;
					color: $typefaceGreyColor;
				}
				.bill-detail-content-up-account-right-content {
					padding: 10rpx 20rpx;
					border-radius: 20rpx;
					box-sizing: border-box;
					background-color: $themeBgcLightGreyColor;
					color: $typefaceGreyColor;
				}
			}
			.bill-detail-content-up-time-container {
				height: 120rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.bill-detail-content-up-time-left-name {
					width: 30%;
					text-align: left;
					line-height: 120rpx;
					height: 100%;
					color: $typefaceGreyColor;
				}
				.bill-detail-content-up-time-right-content {
					border-radius: 20rpx;
					padding: 10rpx 20rpx;
					box-sizing: border-box;
					text-align: right;
					color: $typefaceGreyColor;
					background-color: $themeBgcLightGreyColor;
				}
			}
			
			// 添加账户按钮
			.add-account-btn-container {
				margin-top: 30rpx;
				width: 100%;
				height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			
				.add-account-btn-content {
					border-radius: 30rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					width: 80%;
					height: 80%;
					background-color: $themeYellowColor;
					color: $themePurpleColor;
				}
			}
			
		}
	}
</style>
